<template>
  <div class="nav-container">
    <ul class="nav-menu">
      <li><a href="#" class="logo">
        <img src="../assets/logo1.svg" alt="">
      </a></li>
      <li v-for="item in navlist" :key="item.name" :class="item.name===value?'active':''">
        <router-link :to="item.href" @click.native="$emit('input', item.name)" :title="item.title">{{item.title}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "navbar",
    props:['value'],
    data() {
      return {
        navlist: [
          {index: 0, href: '/', name: 'All', title: '全部'},
          {index: 1, href: '/Good', name: 'Good', title: '精华'},
          {index: 2, href: '/Share', name: 'Share', title: '分享'},
          {index: 3, href: '/Ask', name: 'Ask', title: '问答'},
          {index: 4, href: '/Job', name: 'Job', title: '招聘'},
          {index: 5, href: '/Dev', name: 'Dev', title: '客户端测试'},
        ]
      }
    }
  }
</script>

<style lang="less" scoped>
  .nav-container {
    text-align: left;
    height: 100%;
    position: fixed;
    left: -261px;
    width: 260px;
    transform: translateX(100%);
    transition: all .3s;
    background: #353441;
    a {
      display: block;
      line-height: 60px;
      color: #333333;
    }
  }

  .logo {
    margin-top: 10px;
    height: 50px;
    line-height: 1;

    img {
      max-width: 170px;

    }
    &:hover {
      background: none !important;
    }

  }

  .nav-menu {
    a {
      padding-left: 40px;
      color: #FFF;
      font-size: 14px;
    }
    a:hover {
      background: rgba(0, 0, 0, .3);
      color: #FFF;
    }
    .active {
      background: rgba(0, 0, 0, .3);
      color: #FFF;
    }
  }
  @media screen and (max-width:768px){
    .nav-container{
      transform: translateX(0);
    }

  }

</style>
